<template>
  <el-row :gutter="20">
    <el-col v-for="item in platformList" :key="item.type" :span="4" :lg="4" :sm="8" :xs="12">
      <el-card shadow="hover" class="mb-4" @click="handleClick(item.type)">
        <div class="flex items-center justify-around cursor-pointer">
          <div class="animate__animated animate__bounceIn">
            <svg class="icon w-40px h-40px transition-all duration-500 hover:scale-110 hover:rotate-7" aria-hidden="true">
              <use :xlink:href="getIconByType(item.type)"></use>
            </svg>
          </div>
          <div class="w-full pl-3">
            <p class="text-xl text-gray-600 leading-6 transition-all duration-500">{{ item.count }}</p>
            <p class="text-sm text-gray-500 leading-5 transition-all duration-500">{{ item.title }}</p>
          </div>
          <i class="el-icon-more absolute top-2 right-2 text-gray-300 text-sm transition-all duration-500"></i>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  dashboard: {
    default: () => ({}),
    type: Object
  }
})

const router = useRouter()

const platformList = computed(() => {
  const p = props.dashboard.platform || []
  return p.length > 0
    ? p
    : [
        { type: 1, count: 0, title: '微信公众平台' },
        { type: 2, count: 0, title: '小程序合集' },
        { type: 3, count: 0, title: '企业微信' },
        { type: 4, count: 0, title: '抖音H5' },
        { type: 5, count: 0, title: '独立平台' },
        { type: 0, count: '购买', title: '应用商店' }
      ]
})

const getIconByType = (type) => {
  const iconMap = {
    1: '#icon-weixin2',
    2: '#icon-xiaochengxu',
    3: '#icon-qiyeweixin1',
    4: '#icon-douyin1',
    5: '#icon-yingyong4',
    0: '#icon-shop'
  }
  return iconMap[type] || '#icon-yingyong4'
}

const handleClick = (type) => {
  if (type === 0) {
    window.open('http://s.dkyx.cc')
  } else {
    router.push({ path: 'platform/list', query: { type } })
  }
}
</script>

<style></style>
